<template>

<h3>侦听器</h3>
<p>{{ message }}</p>
<button @click="updateHandle">改变内容</button>
</template>

<script>

export default{
    data(){
        return{
            message:"Hello"
        }
    },
    methods:{
        updateHandle(){
            this.message = "world"
        }
    },
    watch:{
        //侦听器必须和侦听的标识符名字一样
        //能拿到改变之前和改变之后的数据
        //只能侦听响应式数据( {{ }}里的标识符 )
        message(newValue, oldValue){
            console.log(oldValue,newValue)
        }
    }
}

</script>